<template>
  <div class="mall-list">
    <search-list
      ref="mallList"
      :api-url="$url.MallProductList"
      :option="searchOpt"
      :itemPerRow="6"
      :beforeQuery="beforeQuery"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="productId" label="ID"></el-table-column>
      <el-table-column prop="title" label="商品名称">
        <template slot-scope="scope">
          <img v-if="scope.row.cover" :src="scope.row.cover" alt="" class="avatar goods" />
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="categoryName" label="分类"></el-table-column>
      <el-table-column prop="online" label="状态">
        <template slot-scope="scope">
          {{ $selectFormat['goodsListPutAway'](scope.row.online).label }}
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="昵称">
        <template slot-scope="scope">
          <img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" class="avatar" />
          <span>{{ scope.row.operator }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="最近操作时间"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">编辑</el-button>
          <!-- 0-下架,1-上架 -->
          <el-button type="text" v-if="scope.row.online" @click="isOnline(scope.row, 0)">
            下架
          </el-button>
          <el-button type="text" v-else @click="isOnline(scope.row, 1)">上架</el-button>
        </template>
      </el-table-column>
      <!-- 这里加的是走接口的筛选 -->
      <!-- <div slot="btn-before" class="btn-before">
        <el-select v-model="searchCate" placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in cateData"
            :key="index"
            :value="item.id"
            :label="item.title"
          ></el-option>
        </el-select>
      </div> -->
      <div slot="btn-after" class="btn-after">
        <el-button type="primary" @click="add">
          发布商品
        </el-button>
      </div>
    </search-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 多选
        selectedData: [],
        // 创造者筛选
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '商品名称',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'productId',
            label: '商品ID',
          },
          {
            type: 'goodsListPutAway',
            name: 'online',
            label: '上下架',
          },
          {
            type: 'goodsTemplate',
            name: 'templateCode',
            label: '模板',
          },
          {
            type: 'SearchSeclect',
            name: 'categoryId',
            label: '商品分类',
          },
        ],
      };
    },
    methods: {
      // 新增
      add() {
        this.$tabs.open({ name: 'MallGoodsDetail' });
      },
      // 详情
      detail(row) {
        const { id } = row;
        this.$tabs.open({ name: 'MallGoodsDetail', params: { id } });
      },
      // 上下架
      isOnline(val, status) {
        this.$service
          .MallProductOnlineToggle({
            ids: val.id
              ? val.id
              : this.selectedData
                  .map((item) => {
                    return item.id;
                  })
                  .join(','),
            online: status,
          })
          .then((res) => {
            this.$message.success('操作成功！');
            this.$refs.mallList.getList();
          });
      },
      // 多选
      selectionChange(val) {
        this.selectedData = [...val];
      },

      // 筛选之前
      beforeQuery({ searchInfo }) {},
    },
  };
</script>
<style lang="less" scoped>
  .avatar {
    display: inline-block;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
  }
  .goods {
    width: 60px;
    height: 60px;
    border-radius: 0px;
  }
</style>
